<template>
  <div class='index'>
  <div class="top">
    <div class="left">
      <div class="box1">
        <div class="tittle">
          工单统计
          <span>2023.03.03 ~ 2023.03.12</span>
        </div>
        <div class="context">
          <div class="sum">
            <p class='top'>{{total}}</p>
            <p class='btn'>工单总数(个)</p>
          </div>
          <div class="finish">
            <p class='top'>{{completedTotal}}</p>
            <p class='btn'>完成工单(个)</p>
          </div>
          <div class="ing">
            <p class='top'>{{workerCount}}</p>
            <p class='btn'>进行工单</p>
          </div>
          <div class="del">
            <p class='top'>{{cancelTotal}}</p>
            <p class='btn'>取消工单(个)</p>
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="tittle">
          销售统计
          <span>2023.03.03 ~ 2023.03.12</span>
        </div>
        <div class="context">
          <div class="sum">
            <p class='top'>{{count}}</p>
            <p class='btn'>订单量(个)</p>
          </div>
          <div class="finish">
            <p class='top'>{{money}}</p>
            <p class='btn'>销售额(万元)</p>
          </div>
        </div>
      </div>
      <div class="box3">
        <div class="top">
          <div class="tittle">销售数据 
            <span>2023.03.13~2023.03.17</span>
          </div>
          <div class='date'>
             <el-button class="style" @click='week' >周</el-button>
           <el-button class="style" @click='mouth'>月</el-button>
           <el-button class="style" @click='year'>年</el-button>
          </div>
        </div>
        <div class="btn">
          <div class="left">
             <div id="main3" style="width: 440px;height:340px;"></div>
          </div>
        <div class="right">
          <div id="main31" style="width: 440px;height:340px;"></div>
        </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box4">
        <div class="tittle">
          商品热榜
          <span>2023.03.03 ~ 2023.03.12</span>
        </div>
       <div class="list">
       
          <div class='lili' v-for='(item,index) in list' :key='index'>
            <div class='rank' :style='change(index)'>{{index+1}}</div>
            <div class='pr'>{{item.skuName}}</div>
            <div class='count'>{{item.count}}单</div>
          </div>
       </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="box6">
      
        <div class="left">
           <div id="main6" style="width: 440px;height:340px;"></div>
        </div>
        <div class="data">
       <div class="right">
        <div class="count">{{nodesum}}</div>
        <div class="direc">点位数</div>
        <div class="count">{{nodelist.length}}</div>
        <div class="direc">合作商数</div>
       </div>
      </div>
    </div>
    <div class="box7">
      <div class="tittle">异常设备监控</div>
      <div class="pic"><img src="@/assets/empty.87c4f71b.png" alt=""></div>
      <div class="no">暂无数据</div>
    </div>
  </div>


  </div>
</template>

<script>
import bgc1 from '@/assets/1.png'
import bgc2 from '@/assets/2.png'
import bgc3 from '@/assets/3.png'
import {rankApi,nodeCollectApi,stasumApi,weekamountCollect,
mouthamountCollect,yearamountCollect,
weekregionCollect,mouthregionCollect,yearregionCollect,
ordercount,money} from '@/api/index'
import * as echarts from 'echarts';

export default {
  name: 'HrsaasIndex',

  data() {
    return {
      list:[],
      list31:[],
      list32:[],
      list33:[],
      list34:[],
      style:[
        {background:`url(${bgc1})`},
        {background:`url(${bgc2})`},
        {background:`url(${bgc3})`}
      ],
      nodelist:[],
      cancelTotal:'',
      completedTotal:'',
      total: '',
      workerCount: '',
      radio1:'年',
      count:0,
      money:0
    };
  },

  mounted() {
      this.getList()
      this.box6()
      this.box3()
      this.box31()
      this.weekamountCollect()
      this.weekregionCollect()
      this.getnodeCollect()
      this.stasum()
      this.ordercount()
      this.moneysum()
  },

  methods: {
    // 排名列表
    async getList(){
    const res=await rankApi()
    console.log(res,'是排名顺序吗');
    this.list=res
   },
  //  奖牌设置
  change(index){
    if(index===0){
      return this.style[0]
    }
    else if(index===1){
      return this.style[1]
    }
    else if(index===2){
      return this.style[2]
    }
  },
  // 盒子1信息
  // 工单统计
  async stasum(){
    const res=await stasumApi()
    console.log(res);
    this.sumlist=res[0]
      this.cancelTotal=res[0].cancelTotal
      this.completedTotal=res[0].completedTotal
      this.total=res[0].total
      this.workerCount=res[0].workerCount
  },
  // 盒子2信息
  async ordercount(){
   const res= await ordercount()
   this.count=res
  },
  async moneysum(){
    const res= await money()
  this.money = (res/1000000).toFixed(2)
  },
  // 盒子3信息
  box3(){
    var myChart = echarts.init(document.getElementById('main3'));
    const option= {
   title: [
    {
      left: 'center',
      text: '销售额趋势图'
    }],
   tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
    grid: {
    left: '3%',
    right: '10%',
    bottom: '15%',
    top:'10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: this.list31,
  },
  yAxis: {
    name:'单位： 元',
    type: 'value'
  },
  series: [
    {
      data: this.list32,
      type: 'line',
      symbol:'circle',
      lineStyle:{
       color:"#ff5757"
         },
      smooth: true,
       areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgb(255, 172, 172)',
                  },
                  {
                    offset: 0.9,
                    color: 'rgb(255, 254, 254)',
                  },
                ],
                false
              ),
            },
          },
}]
}
myChart.setOption(option)
  },
  box31(){
    var myChart = echarts.init(document.getElementById('main31'));
    const option = {
       title: [
    {
      left: 'center',
      text: '销售额分布'
    }],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '20%',
    top:'10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: this.list33,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: {
    name:'单位： 元',
    type: 'value'
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '6%',
      data: this.list34,
    }
  ]
};
myChart.setOption(option)
  }
  ,
  async weekamountCollect(){
    const res = await weekamountCollect()
    console.log(res,'是周1的数据吗');
   this.list32= res.series
   this.list31= res.xAxis
   this.box3()
  },
  async mouthamountCollect(){
    const res = await mouthamountCollect()
    console.log(res,'是月1的数据吗');
   this.list32= res.series
   this.list31= res.xAxis
   this.box3()
  },
  async yearamountCollect(){
    const res = await yearamountCollect()
    console.log(res,'是年1的数据吗');
   this.list32= res.series
   this.list31= res.xAxis
   this.box3()
  },
  async weekregionCollect(){
    const res = await weekregionCollect()
    console.log(res,'哈哈哈下课啦');
    this.list33=res.xAxis
    this.list34=res.series
    this.box31()
  },
   async mouthregionCollect(){
    const res = await mouthregionCollect()
    console.log(res,'哈哈哈下课啦');
    this.list33=res.xAxis
    this.list34=res.series
    this.box31()
  },
   async yearregionCollect(){
    const res = await yearregionCollect()
    console.log(res,'哈哈哈下课啦');
    this.list33=res.xAxis
    this.list34=res.series
    this.box31()
  },
  week(){
    this.weekamountCollect()
    this.weekregionCollect()
  },
  mouth(){
    console.log('点击了月');
    this.mouthamountCollect()
    this.mouthregionCollect()
  },
  year(){
    this.yearamountCollect()
    this.yearregionCollect()
  },

  // 盒子6信息
  box6(){
    var myChart = echarts.init(document.getElementById('main6'));
   const option= {
  title: {
    text: '合作商点位数Top5',
    left: 'left'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  series: [
   
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['49%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: this.nodelist
    }
  ]

}
     myChart.setOption(option)
  },
  // 盒子6的信息
  async getnodeCollect(){
   const res = await nodeCollectApi()
   console.log(res,'点位数的结果跑哪了');
   this.nodelist=res
   console.log(this.nodelist,'结果呢');
   this.box6()
  }
  
  },
  computed:{
    // 盒子6的请求信息
    nodesum(){
     return this.nodelist.reduce((pre,item)=>{
        return pre+item.value
      },0)
    }
  }
};
</script>

<style lang="scss" scoped>
 .index {
      background-color: #f8fafd;
     .top {
         position: relative;
       .left{
         position: relative;
      .box1{
      width: 460px;
      height: 166px;
      border-radius: 10px;
      background-color: #e9f3ff;
      padding: 20px 0 0 20px;
      .tittle{
          color: #333;
          font-size: 16px;
          font-weight: 600;
          span{
            color: #999;
            font-size: 12px;
            margin-left: 10px;
          }
          }
        .context{
          width: 100%;
          display: flex;
          margin-left: 10px;
          .top{
            color:#072074;
            font-size: 36px;
            margin-top: 28px;
          }
          .btn{
            color:#91a7dc;
            font-size: 12px;
            margin-top: -25px;
          }
          .sum{
            flex: 1;
          }
          .finish{
            flex: 1;

          }
          .ing{
            flex: 1;

          }
          .del{
            flex: 1;
          }
        }
    }
    .box2{
      position: absolute;
      left: 486px;
      top: 0px;
      width: 385px;
      height: 166px;
      border-radius: 10px;
      padding: 20px;
      background-color: #fbefe8;
      .tittle{
          color: #333;
          font-size: 16px;
          font-weight: 600;
          span{
            color: #999;
            font-size: 12px;
            margin-left: 10px;
          }
          }
        .context{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          .top{
            color:#ff5757;
            font-size: 36px;
            margin-top: 28px;
          }
          .btn{
            color:#deaec6;
            font-size: 12px;
            margin-top: -25px;
          }
          .sum{
            flex: 1;
            margin-left: 20px;
          }
          .finish{
            flex: 1;
            margin-left: 20px;
          }
          .ing{
            flex: 1;
          }
          .del{
            flex: 1;
          }
        }
    }
    .box3{
      width: 865px;
      height: 352px;
      border-radius: 10px;
      margin-top: 20px;
      background-color: #fff;
      padding:10px;
      .top{
        padding: 15px 0 15px 15px;
        display: flex;
        height: 34px;
        .tittle{
          color:#333;
          font-size: 20px;
        }
        span{
          color: #999;
          font-size: 12px;
          margin-left: 5px;
        }
        .date{
          margin-left: 460px;
          margin-top: -5px;
          .style{
            border:none;
            // width: 5px;
            height: 5px;
            line-height: 5px;
            padding: 10px;
            box-shadow:0px 0px 0px 1px #ccc
          }
        }
      }
      .btn{
        display: flex;
        margin-top: 10px;
        .left{
        width: 50%;
        padding: 10px;
      }
      .right{
        width: 50%;
      }
      }
    }
      }
      .right{
        .box4{
        position: absolute;
        left: 885px;
        top: 0;
        width: 300px;
        height: 538px;
        border-radius: 10px;
        padding: 20px 0 20px 20px;
        background-color: #fff;
        .tittle{
          color: #333;
          font-size: 16px;
          font-weight: 600;
          span{
            color: #999;
            font-size: 12px;
            margin-left: 10px;
          }
        }
         .list{
           
          list-style-type:none;
          width: 235px;
          height: 460px;
          // border:1px solid #ccc;
           .lili{
            display: flex;
            width: 235px;
            height: 25px;
            // border:1px solid #ccc;
            margin-top: 20px;
            .rank {
              width: 20px;
              height: 20px;
              text-align: center;
              background-image: url('~@/assets/4.png');
              color: #e9b499;
              }
              .pr{
                width: 138px;
                padding-left: 18px;
                color: #333;
              }
              .count {
                // width: 59px;
                color:#737589;
                padding-left:30px
              }
            
       
        }
         }
        }
      }
     }
     .bottom{
      position: relative;
      .box6{
        position: relative;
        width: 668px;
        height: 353px;
        border-radius: 10px;
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        .data{
          padding-top: 50px;
          position: absolute;
          right: 40px;
          top:60px;
          width: 154px;
          height: 230px;
          background-color: #f8f8f9;
          border-top-right-radius: 20px;
          border-bottom-left-radius: 20px;
          text-align: center;
          // .left{
          //   position: absolute;
          //   left: 0;
          //   top: 0;
          // }
          .right{
             .count{
            color:#072074;
            padding-top: 20px;
            font-size: 24px;
          }
          .direc{
            font-size: 12px;
            color:#000412;
          }
          }
        }
      }
      .box7{
        position: absolute;
        // position: relative;
        width: 472px;
        height: 353px;
        border-radius: 10px;
        left: 688px;
        top: 0;
        padding: 20px;
          background-color: #fff;
        .tittle{
          font-size: 16px;
          font-weight: 700;
          padding: 10px;
        }
        .pic{
          width: 123px;
          height: 96px;
          translate: 125% 100%;
        }
        .no{
          text-align: center;
          padding-top: 120px;
        }
      }
     }
     
    }
</style>